<template>
  <div class="card">
    <div>
      <a-button type="primary" style="margin-right: 10px" icon="plus" @click="showAdd">新建</a-button>
      <a-button type="danger" @click="batchDel()">批量删除</a-button>
    </div>
    <a-table
      :rowKey="(record, index) => index"
      :pagination="{
        pageSize: formData.page_size,
        pageSizeOptions: ['20', '30', '40', '50'],
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
        total: total,
        current: formData.page,
        showTotal: total => `共 ${total} 条`
      }"
      @change="paginChange"
      style="margin-top: 10px; border: 1px solid #e8e8e8"
      show-size-changer
      show-quick-jumper
      :row-selection="rowSelection"
      :loading="loading"
      :data-source="tableData"
      :columns="columns"
    >
      <div slot="enable_profit" slot-scope="text, record">
        <span v-if="record.enable_profit == 1">参与</span>
        <span v-if="record.enable_profit == 0">不参与</span>
      </div>
      <div slot="operate" slot-scope="text, record">
        <span class="linkStyle" @click="edit(record)">编辑</span>
        <span style="color: #e8e8e8">丨</span>
        <span class="linkStyle" @click="del(record.id)">删除</span>
      </div>
    </a-table>
    <AddGrade :isShowAdd.sync="isShowAdd" :object.sync="object" @upload="getList" />
  </div>
</template>

<script>
import AddGrade from './dialog/AddGrade.vue'
import { getGradeListAPI, delGradeListAPI } from '@/api/product.js'
export default {
  name: 'gradeMember',
  components: {
    AddGrade
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        }
      }
    }
  },
  data() {
    return {
      isShowAdd: false,
      object: {},
      selectedRowKeys: [],
      select_rows: [],
      loading: false,
      total: 0,
      formData: {
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          brand_id: process.env.VUE_APP_BRAND_ID
        }
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '等级名称',
          dataIndex: 'level_name',
          align: 'center'
        },
        {
          title: '金额',
          dataIndex: 'money',
          align: 'center'
        },
        {
          title: '级别时长类型',
          dataIndex: 'card_type',
          align: 'center'
        },
        {
          title: '是否参与返佣分润',
          scopedSlots: { customRender: 'enable_profit' },
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      tableData: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        this.loading = true
        const res = await getGradeListAPI()
        this.tableData = res.data.list
        this.total = res.data.total
        this.selectedRowKeys = []
      } finally {
        this.loading = false
      }
    },
    paginChange(value) {
      console.log(value)
      this.formData.page = value.current
      this.formData.page_size = value.pageSize
      this.getList()
    },
    batchDel() {
      if (this.select_rows.length < 1) return this.$message.error('请先选中至少一行数据')
      this.$confirm({
        title: '确认删除吗?',
        content: h => <div style="color:red;">此操作不可撤回</div>,
        onOk: async () => {
          try {
            await delGradeListAPI({
              brand_id: process.env.VUE_APP_BRAND_ID,
              ids: this.select_rows.map(item => item.id)
            })
            this.$message.success('操作成功')
            this.getList()
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    del(id) {
      this.$confirm({
        title: '确认删除吗?',
        content: h => <div style="color:red;">此操作不可撤回</div>,
        onOk: async () => {
          try {
            await delGradeListAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: id })
            this.$message.success('操作成功')
            this.getList()
          } catch (error) {
            this.$message.error(error.data.msg)
          }
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    showAdd() {
      this.isShowAdd = true
    },
    edit(object) {
      this.object = object
      this.isShowAdd = true
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-form-item {
  margin: 0;
}
</style>
